﻿@model NB.MGJ.Model.Organization_Enterprise
@{
    Layout = null;
    var eCode = ViewBag.Code;
}
@*<script src="~/Scripts/WebUploader/webuploader.js"></script>*@

<script src="~/Scripts/Bootstrap/js/bootstrap-select.js" charset="utf-8" type="text/javascript"></script>
<link href="~/Scripts/Bootstrap/css/bootstrap-select.min.css" rel="stylesheet" />

<style>  
    .btns
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #picker
    {
        position: relative;
    }

        #picker .webuploader-pick
        {
            display: block;
            width: 91px;
            height: 91px;
        }

        #picker input[type='file']
        {
            opacity: 0;
            display: block;
            width: 91px;
            height: 91px;
            position: absolute;
            z-index: 99;
        }

    /*.img-thumbnail {
        position: relative;
    }*/
</style>


<input type="hidden" id="IsReady" value="0" />
<form class="form-horizontal" id="form_Enterprise" onkeydown="if(event.keyCode==13){return false;}">
    <div class="form-group RowAlgnTop">
        @*<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"><span class="red-600">*</span>&nbsp;机构代码:</div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <input readonly="readonly" class="form-control" type="text" name="Code" value="@eCode" />
            </div>*@
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"><span class="red-600">*</span>&nbsp;机构名称:</div>

        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 forselect">
            @*<input class="form-control" type="text" name="EnterpriseName" value="" />*@
            @Html.TextBoxFor(p => p.EnterpriseName, new
            {
                @class = "form-control",
                id = "EnterpriseName",
                placeholder = "请输入机构名称",
                maxlength = "20"
            })
            @Html.ValidationMessageFor(p => p.EnterpriseName)
        </div>
    </div>
    <div class="form-group margin-top-15 margin-bottom-15">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            <span class="red-600">*</span>&nbsp;机构形式:
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 forselect">
            <select class="form-control" id="OrganizationForm" name="OrganizationForm" onchange="$.MGJ.OrganizationalManage.Ajax_GetTypeBox($(this).val())"></select>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            <span>&nbsp;机构类型:</span>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 forselect">
            <select class="form-control EmptyValidationText" id="OrganizationId" name="OrganizationId">
                <option>
                    请选择机构类型
                </option>
            </select>
        </div>
    </div>
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            <span style=" color:red;">*</span>
            <span>&nbsp;所在地:</span>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <select class="form-control" id="ProvinceId" name="ProvinceId">
                <option>所在省</option>
            </select>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <select class="form-control" id="City" name="City">
                <option>所在市</option>
            </select>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <select class="form-control" id="Region" name="Region">
                <option>所在区</option>
            </select>
        </div>
    </div>

    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            <span class="red-600">*</span>&nbsp;
            所处行业:
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <select id="ClassifyId" data-dropup-auto="false" name="ClassifyId" class="selectpicker show-tick form-control forselect" multiple title="所处行业" data-live-search="false"></select>
        </div>
    </div>


    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            <span class="red-600">*</span>&nbsp;
            服务版本:
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <select id="ServiceVersion" data-dropup-auto="false" name="ServiceVersion" class="selectpicker show-tick form-control forselect" multiple title="服务版本" data-live-search="false"></select>
        </div>
    </div>


    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">详细地址:</div>
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <input class="form-control EmptyValidationText" type="text" name="Address" placeholder="请输入详细地址" maxlength="50" />
        </div>
    </div>
    @if (ViewBag.eId == 1)
    {
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">有效起始日期:</div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="endDate" type="radio" value="1" />&nbsp;一年</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="endDate" type="radio" value="2" checked />&nbsp;两年</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="endDate" type="radio" value="3" checked="checked" />&nbsp;三年</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="endDate" type="radio" value="5" />&nbsp;五年</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="endDate" type="radio" value="100" />&nbsp;永久</label>
        </div>
        <input type="hidden" name="StartTime" value=" " />
        <input type="hidden" name="EndTime" value=" " />
    </div>
    }
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">&nbsp;联系人:</div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input class="form-control forselect" type="text" name="PersonCharge" id="PersonCharge" placeholder="请输入联系人" maxlength="20" />
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">手机:</div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input class="form-control" type="tel" name="PersonMobile" id="PersonMobile" placeholder="请输入11位的手机号" maxlength="11" />
        </div>
    </div>
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">启用/停用:</div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="ViewFlag" type="radio" value="1" checked />&nbsp;启动</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <label><input name="ViewFlag" type="radio" value="0" />&nbsp;停用</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">电话:</div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input class="form-control EmptyValidationNub" type="tel" name="LandlinePhone" placeholder="如：0511-4405222、021-87888822" maxlength="13" />
        </div>
    </div>
    @*<div class="form-group RowAlgnTop">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"><span class="red-600">*</span>&nbsp;系统默认账号:</div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <input type="text" value="0245" readonly="readonly" class="form-control" name="loginName" id="loginName" />
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right"><span class="red-600">*</span><div style="display:inline-block"><div>默认密码:</div><div>(123456)</div></div></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <input class="form-control" type="password" name="Pwd" id="pwd" value="123456" />
            </div>
        </div>*@
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            &nbsp;企业LOGO:
        </div>
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div id="thelist" class="uploader-list" style="display:flex;align-items:center">
                <div id="picker" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:91px;height:91px;border-radius:5px;background-repeat:no-repeat"></div>
                <span>（建议上传200*60的图片）</span>
            </div>
        </div>
    </div>
    <div class="form-group RowAlgnTop">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            &nbsp;备注:
        </div>
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            @*<textarea name="Remark" class="form-control"></textarea>*@
            <input class="form-control" type="text" name="Remark" value="" />
        </div>
    </div>
</form>

<script>

    $(document).ready(function () {
        BindClassifyIdSelect();
        BindServiceVersionSelect();
    })
    function BindClassifyIdSelect() {
        $.ajax({
            type: "POST",
            url: "/Product/GetClassifyByFatherId",
            data: { FatherId: 0 },
            success: function (result) {
                var list = result;
                var html = ""
                for (var i = 0; i < list.length; i++) {
                   html+="<option value='"+list[i].ID+"'>"+list[i].Name+"</option>"
                }
                $("#ClassifyId").append(html);
                $('#ClassifyId').selectpicker({});
                $('#ClassifyId').selectpicker('refresh');
            }
        });
    }


    function BindServiceVersionSelect() {
        $.ajax({
            type: "POST",
            url: "/Manager/GetServiceVersionList",
            data: { FatherId: 0 },
            success: function (result) {
     
                var str = JSON.stringify(result);
                var list = result;
                var html = ""
               var aa= list[0];
               for (var i = 0; i < list.length; i++) {

                   var key = list[i].Key
                   html += "<option value='" + key + "'>" + list[i].Value + "</option>"
                }
                $("#ServiceVersion").append(html);
                $('#ServiceVersion').selectpicker({});
                $('#ServiceVersion').selectpicker('refresh');
            }
        });
    }



    //setTimeout(function () {
    //    var aa = $("#ClassifyId").val();
    //}, 10000);


    //表单转JSON字符串  var data = JSON.stringify($("form").serializeObject()) ;
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    //input验证
    $('#form_Enterprise').bootstrapValidator({
        group: '.forselect',
        message: '类型名称不能为空',
        excluded: [':disabled'],
        fields: {
            EnterpriseName: {
                validators: {
                    notEmpty: {
                        message: '机构名称不能为空'
                    },
                    stringLength: {
                        max: 20,
                        message: '机构名称最大长度为20',
                    },
                    regexp: {
                        regexp: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                        message: '机构名称只能输入中文和字母'
                    },
                    threshold: 1, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                        type: "post",
                        url: "/Manager/CheckEnterparise",
                        message: '此机构名称已注册',
                        delay: 2000
                    }
                }
            },
            OrganizationForm: {
                validators: {
                    notEmpty: {
                        message: '机构形式尚未选择'
                    },
                }
            },
            OrganizationId: {
                validators: {
                    notEmpty: {
                        message: '机构类型尚未选择'
                    },
                }
            },
            ClassifyId: {
                validators: {
                    notEmpty: {
                        message: '所处行业尚未选择'
                    },
                }
            },
            PersonCharge: {
                validators: {
                    regexp: {
                        regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                        message: '联系人不能输入符号'
                    },
                    stringLength: {
                        max: 20,
                        message: '联系人最大长度为20',
                    }
                }
            },
            Address: {
                validators: {
                    stringLength: {
                        max: 50,
                        message: '详细地址最大长度为50',
                    }
                }
            },
            PersonMobile: {
                validators: {
                    regexp: {
                        regexp: /^1[0-9]{10}$/,
                        message: '手机号码格式错误'
                    }
                }
            },
            LandlinePhone: {
                validators: {
                    regexp: {
                        regexp: /^0\d{2,3}-\d{7,8}$/,
                        message: '电话号码格式错误'
                    }
                }
            },
            ServiceVersion: {
                validators: {
                    notEmpty: {
                        message: '服务版本尚未选择'
                    },
                }
            }
        }
    });



    //var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
    $(function () {


        $my.GetPCR(0, 0, 0);
        $.MGJ.OrganizationalManage.Ajax_GetFormBox("@ViewBag.rid",0, "请选择", "@ViewBag.HeadId");

        $('#picker').mouseenter(function () {
            $(this).css('background', 'url("/Content/webImgs/upLogo/cp_img_tj_a.png")');

        }).mouseleave(function () {
            $(this).css('background', 'url("/Content/webImgs/upLogo/cp_img_tj.png")');
        });

        var uploader = WebUploader.create({

            // swf文件路径
            //        swf: BASE_URL + '/js/Uploader.swf',
            //指定拖拽容器
            dnd: '#thelist',
            //截图可粘贴区域
            paste: 'document.body',

            // 文件接收服务端。
            server: '/Manager/AddEnterprise',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {

            $("#IsReady").val(1);


            var $li = $(
                            '<div  id="' + file.id + '" class="img-thumbnail">' +
                            '<img alt="null"/>' +
    //                        '<p class="info">' + file.name + '</p>' +
                            '</div>'
                    ),
                    $img = $li.find('img');


            // $list为容器jQuery实例
            $('#thelist').prepend($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 91, 91);
            $('#thelist > .img-thumbnail').eq(0).mouseenter(function () {
                var url = $(this).find('img').attr('src');
                $(this).attr('name', url).find('img').attr('src', '/Content/webImgs/upLogo/cp_img_sc.png');
            }).mouseleave(function () {
                var url = $(this).attr('name');
                $(this).find('img').attr('src', url);
            }).click(function () {
                $(this).remove();
                $('#picker').css('display', 'inline-block');
            });

            $('#picker').css('display', 'none');
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),$percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            $.MGJ.OrganizationalManage.Dialog_AddOrganizationalObj.close();
            if (response.state > 0) {
                $.L.msgSuccess("公司名称：" + response.ename + ",该公司的管理账号为：" + response.LoginName + "密码为：" + response.pwd);
                $.MGJ.OrganizationalManage.Ajax_GetOrganizationalInfo(1);
            }
            else {
                $.L.msgSuccess("操作失败");
            }
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                    $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error" style="position: relative"></div>').appendTo($li);
            }
            $error.text('上传失败');
            $error.append($('<span class="glyphicon glyphicon-remove" style="position: absolute;right: 0;color: green;font-size: 18px"></span>'))
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        function up() {
            uploader.upload();
        }
        //按钮是弹出窗  只好用这种方式来选择按钮
        $('button[data-btnname="button_save"]').click(function () {
     
            $(this).attr("disabled",true);
            var bootstrapValidator = $("#form_Enterprise").data('bootstrapValidator').validate();
            if (bootstrapValidator.isValid()) {
                var myDate = new Date();
                var s = myDate.toLocaleDateString();
                var lateTime = $("#form_Enterprise .form-group").find('input[name="endDate"]:checked').val();
                var EndTime = new Date(myDate.getFullYear() + parseInt(lateTime), myDate.getMonth(), myDate.getDate()).toLocaleDateString();

                $("#form_Enterprise .form-group").find('input[type="hidden"][name="StartTime"]').val(myDate.toLocaleDateString());
                $("#form_Enterprise .form-group").find('input[type="hidden"][name="EndTime"]').val(new Date(myDate.getFullYear() + parseInt(lateTime), myDate.getMonth(), myDate.getDate()).toLocaleDateString());


                var clfId = $('#ClassifyId').val();
                var str = "";
                for (var i = 0; i < clfId.length; i++) {
                    str += clfId[i] + ","
                }
                str = (str.substring(str.length - 1) == ',') ? str.substring(0, str.length - 1) : str;
                var ServiceVersion = $('#ServiceVersion').val();
                var str2 = "";
                for (var i = 0; i < ServiceVersion.length; i++) {
                    str2 += ServiceVersion[i] + ","
                }
                str2 = (str2.substring(str2.length - 1) == ',') ? str2.substring(0, str2.length - 1) : str2;

             
                var data = $("#form_Enterprise").serializeObject();
                data.ClassifyId = str;
                data.ServiceVersion = str2;
                data = JSON.stringify(data);
                if ($("#IsReady").val() == 1) {
                    uploader.options.formData = { "submitData": data };
                    uploader.upload();
                }
                else {
                    //var bootstrapValidator = $("#form_Enterprise").data('bootstrapValidator').validate();
                    $.MGJ.OrganizationalManage.Ajax_AddEnterprise(data);
                }
            } else {
                $.L.msgError("请检查数据格式！");
                $(this).attr("disabled", false);
            };
            //$.MGJ.OrganizationalManage.Dialog_AddOrganizationalObj.close();
        })

    });
</script>




